import { Component } from 'react'
import { View, Button, Image } from '@tarojs/components'
import { NavHeader, Body } from '../../componets/public'
import Taro from '@tarojs/taro'
import { store } from '../../state/store';
import { getStaticState } from '../../state/static-store';

import './index.scss'

const MyButton = function () {
  const click = () => {
    Taro.navigateTo({
      url: '/pages/list/list',
    })
  }
  return <Button onClick={() => click()} className='yanjiu-but'>我的列表</Button>
};
const PageView = function({userUrl, nickName}) {
  return (<View className='index gr-bg__red_walls'>
        {/* <NavHeader navText='哲趣小助手'></NavHeader> */}
        <MyButton></MyButton>
        <Body navText='哲趣小助手'>
          {
            userUrl && nickName ?
              <View className='user-info'>
                <View className='welcome'>欢迎~</View>
                <View className='user-url'>
                  <Image src={userUrl} style={{borderRadius: "50%"}}></Image>
                </View>
                <View className='user-name'>{nickName}</View>
              </View>
            : <View></View>
          }
        </Body>
  </View>)
}
interface StateType {
  userUrl: string,
  nickName
}
export default class Index extends Component {
  state: StateType;
  constructor(props){
    super(props);
    this.state = {
      userUrl: '',
      nickName: ''

    }
  }
  onLoad() {
    const {avatarUrl = "", nickName = ""} =  getStaticState('userInfo') || {};
    this.state.userUrl = avatarUrl;
    this.state.nickName = nickName;
    this.setState(this.state);
    store.subscribe(() => {
      const userInfo = store.getState().state || {};
      const { avatarUrl = '', nickName = '' } = userInfo || {};
      this.state.userUrl = avatarUrl;
      this.state.nickName = nickName;
      this.setState(this.state);
    });
  }
  componentDidMount () {
  }
  componentWillUnmount () { }

  componentDidShow () {

  }

  componentDidHide () { }

  render () {
    return (
      <PageView userUrl={this.state.userUrl} nickName={this.state.nickName}></PageView>
    )
  }
}
